<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<%@ include file="/WEB-INF/views/include/easyui.jsp"%>
</head>
<body style="font-family: '微软雅黑'">
	<div id="tb" style="padding: 5px; height: auto">
		<div>

			<a href="#" class="easyui-linkbutton" plain="true"
				iconCls="icon-remove" onclick="del()">删除</a> <span
				class="toolbar-item dialog-tool-separator"></span> <a href="#"
				class="easyui-linkbutton" plain="true"
				iconCls="icon-standard-arrow-turn-right" onclick="forward()">转发</a>
			<span class="toolbar-item dialog-tool-separator"></span> <a href="#"
				class="easyui-menubutton" plain="true" id="markBtn"
				data-options="menu:'#mark',iconCls:'icon-hamburg-star'">标记为...</a>
			<div id="mark" style="width: 150px;">
				<div data-options="iconCls:'icon-hamburg-star'" onclick="addStar()">星标邮件</div>
				<div data-options="iconCls:'icon-metro-star'" onclick="unStar()">取消星标</div>
				<div class="menu-sep"></div>
				<div data-options="iconCls:'icon-standard-tag-blue-edit'">
					自定义标签
					<div style="width: 150px;">
						<c:forEach var="tag" items="${TAGS }">
							<div data-options="iconCls:'${tag.markStyle }'"
								onclick="addTag(${tag.id})">${tag.markName }</div>
						</c:forEach>
					</div>
				</div>

				<div class="menu-sep"></div>
				<div data-options="iconCls:'icon-standard-tag-blue-add'"
					onclick="addMark()">新建标签</div>
			</div>
			<span class="toolbar-item dialog-tool-separator"></span> <a href="#"
				class="easyui-menubutton" plain="true"
				data-options="menu:'#move',iconCls:'icon-standard-book-previous'"
				onclick="">移动到...</a>
			<div id="move" style="width: 150px;">
				<div data-options="iconCls:'icon-hamburg-folder'" onclick="moveForder(1)">收件箱</div>
				<div data-options="iconCls:'icon-hamburg-folder'" onclick="moveForder(2)">发件箱</div>
				<div class="menu-sep"></div>
				<div data-options="iconCls:'icon-standard-folder'">
					自定义文件夹
					<div style="width: 150px;">
						<c:forEach var="forder" items="${FORDERS }">
							<div data-options="iconCls:'icon-standard-folder-go'"
								onclick="moveForder(${forder.id})">${forder.forderName }</div>
						</c:forEach>
					</div>
				</div>

				<div class="menu-sep"></div>
				<div data-options="iconCls:'icon-standard-folder-add'"
					onclick="addForder()">新建文件夹</div>
			</div>
		</div>
	</div>
<table id="dg"></table>

	<div id="dlg"></div>
	<div id="icon_dlg"></div>

<script type="text/javascript">
var dg;
var d;
$(function(){   
	dg=$('#dg').datagrid({    
	method: "get",
    url:'<%=path%>/mail/startList?t='+new Date(), 
    fit : true,
	fitColumns : true,
	border : false,
	idField : 'id',
	striped:true,
	hideCol:false,
	pagination:true,
	rownumbers:true,
	pageNumber:1,
	pageSize : 20,
	pageList : [ 10, 20, 30, 40, 50 ],
    columns:[[    
		{field:'ck',checkbox:true},
        {field:'id',title:'',width:10,formatter : function(value, row, index) {
        	var html="";
        	if(row.annexVal!=null&&row.annexVal!=''){
        		html='<span class="icon-cologne-cv">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="icon-hamburg-contact">&nbsp;&nbsp;&nbsp;&nbsp;</span>';
        	}else{
        		html= '<div class="icon-hamburg-contact">&nbsp;</div>';
        	}
        	if(row.isRead==0){
        		//替换为未读icon
        		html=html.replace("icon-hamburg-contact", "icon-hamburg-email");
        	}
        	return html;
   			
    	}},
    	{field:'sendUserCSID',title:'发件人',width:20,formatter : function(value, row, index) {
    		var url="<%=path%>/mail/view?type=inbox&mailId="+row.mailId+"&id="+row.id+"&backUrl=mail/isStart";
			return "<a href='"+url+"' style='text-decoration:none;color:#000000;'>"+row.sendUserName+"</a>";
    	}},  
        {field:'mailTitle',title:'主题',width:70,
			formatter : function(value, row,
					index) {
				var url="<%=path%>/mail/view?type=inbox&mailId="+row.mailId+"&id="+row.id+"&backUrl=mail/isStart";
                var html = "<div style='position:relative;'><div><a href='" + url + "' style='text-decoration:none;color:#000000;'>" + value + "</a></div>";
                var marks=row.markers;
                var markHtml="";
                if(marks!=null&&marks.length>0){
                	for(var i=0;i<marks.length;i++){
                	   markHtml=markHtml+"<span class='l-btn-left l-btn-icon-left' onclick='delMark(\""+marks[i].markId+"\")'><span class='l-btn-text'>"+marks[i].markName+"</span><span class='l-btn-icon "+marks[i].markStyle+"'>&nbsp;</span></span>"
                	}
                }
                
                
                html = html + "<div style='position:absolute;right:10px; top:0px;'>" + markHtml + "</div></div>";
                return html;
				
			}},    
        {field:'receiveTime',title:'时间',sortable:true,width:20,formatter : function(value, row, index) {
   			return new Date(value).pattern("yyyy-MM-dd HH:mm:ss")
    	}},
        {
            field: 'isStart',
            title: '',
            sortable: true,
            width: 5,
            formatter: function(value, row, index) {
                if (value == null || value == 0) {
                    return '<div class="icon-metro-star" onclick="addStar('+row.id+')">&nbsp;</div>';
                } else {
                    return '<div class="icon-hamburg-star" onclick="unStar('+row.id+')">&nbsp;</div>';
                }
                return value;
            }
        }
    ]],
   
    toolbar:'#tb',
    onDblClickCell: function(rowIndex){
    	var row = dg.datagrid('getSelected');
    	if(rowIsNull(row)) return;
    	window.location.href='<%=path%>/mail/view?type=inbox&mailId='+row.mailId+'&id='+row.id+'&backUrl=mail/isStart'; 
	}
	});
});
</script>
<script>
	function del(){
		var ids=getIds();
		if(ids==""){
			parent.$.messager.show({ title : "提示",msg: "请选择行数据！", position: "bottomRight" });
			return;
		}
		parent.$.messager.confirm('提示', '您确定要删除该邮件？', function(data){
			if(data){
				window.location.href="<%=path%>/mail/del?callBack=/mail/isStart&mailId="+ids;
			}
		});
	}
	function forward() {
	    var row = dg.treegrid('getSelections');
	    if (row.length != 1) {
	        parent.$.messager.show({
	            title: "提示",
	            msg: "请选择一条数据，进行转发！",
	            position: "bottomRight"
	        });
	    } else {
	        window.location.href = "<%=path%>/mail/redo?mailId=" + row[0].mailId + "&forward=forward";
	    }
	}
	function addMark() {
		var ids=getIds();
	    //添加图片到textarel
	    d = $('#dlg').dialog({
	        title: '新增标签',
	        width: 400,
	        height: 180,
	        closed: false,
	        cache: false,
	        maximizable: false,
	        resizable: false,
	        href: '<%=path%>/mail/addTag?ids='+ids,
	        modal: true,
	        buttons: [{
	            text: '确认',
	            handler: function() {
	                $('#markForm').submit();
	            }
	        },
	        {
	            text: '取消',
	            handler: function() {
	                d.panel('close');
	            }
	        }]
	    });
	}
	function addForder() {
	    //添加图片到textarel
	    var ids=getIds();
	    d = $('#dlg').dialog({
	        title: '新增文件夹',
	        width: 400,
	        height: 180,
	        closed: false,
	        cache: false,
	        maximizable: false,
	        resizable: false,
	        href: '<%=path%>/mail/addForder?ids='+ids,
	        modal: true,
	        buttons: [{
	            text: '确认',
	            handler: function() {
	                $('#forderForm').submit();
	            }
	        },
	        {
	            text: '取消',
	            handler: function() {
	                d.panel('close');
	            }
	        }]
	    });
	}
	
	function addStar(){
		var ids=getIds();
		alert(ids);
		if(ids!=""){
			$.ajax({
				type:'get',
				url:"<%=path%>/mail/addStar?ids="+ids,
				success: function(data){
					if(successTip(data,dg))
			    		dg.treegrid('reload');
				}
			});
		}
		
	}
	function unStar(){
		//去掉星标
		var ids=getIds();
		
		if(ids!=""){
			$.ajax({
				type:'get',
				url:"<%=path%>/mail/unStar?ids="+ids,
				success: function(data){
					if(successTip(data,dg))
			    		dg.treegrid('reload');
				}
			});
		}
	}
	function getIds(){
		var row = dg.treegrid('getSelections');
		var ids="";
		if(row!=null&&row.length>0){
			for(var i=0;i<row.length;i++){
				if(ids!=""){
					ids=ids+","+row[i].id;
				}else{
					ids=ids+row[i].id;
				}
			}
		}
		return ids;
	}
	function delMark(val){
		parent.$.messager.confirm('提示', '该操作将删除该标签？', function(data){
			if(data){
				$.ajax({
					type:'get',
					cache:false,
					url:"<%=path%>/mail/delMark?id="+val,
					success: function(data){
						if(successTip(data,dg))
				    		dg.treegrid('reload');
					}
				});
			}
		});
	}
	function addTag(tagId){
		var ids=getIds();
		if(ids!=""){
			$.ajax({
				type:'get',
				url:"<%=path%>/mail/doTag?id="+tagId+"&markMails="+ids,
				success: function(data){
					if(successTip(data,dg))
			    		dg.treegrid('reload');
				}
			});
		}
	}
	
	function moveForder(forderId){
		var ids=getIds();
		if(ids!=""){
			$.ajax({
				type:'get',
				url:"<%=path%>/mail/doForder?id="+forderId+"&ids="+ids,
				success: function(data){
					if(successTip(data,dg))
			    		dg.treegrid('reload');
				}
			});
		}
	}
</script>
</body>
</html>